<!-- 前台店长 – 首页 – 会员考勤			Members -->
<template>
	<view class="">
		<!-- <view>
			<mSearch :show="false" @search="search($event,1)" :mode="2" radius="5"></mSearch>
		</view> -->
		<view class="w90s f  mt20">
			<view class="flexR wd45 fw600 fs26">
				<view class="wd70 he tac">姓名</view>
				<view class="he1 tac wd30">性别</view>
			</view>
			<view class="wd55 he tac fs26 fw600" @click="dateOpen('hopeBeginTime', hopeBeginTime)">
				{{timestr}}月上课次数(月/次)
			</view>
		</view>
		<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
			<view class="w90s f " v-for="(item,index) in list" :key="index" @click="toMjiaoan()">
				<view class="flexR wd45  fs26">
					<view class="wd70 he tac" @click="details(item)">{{item.name}}</view>
					<view class="he1 tac wd30">{{item.sex}}</view>
				</view>
				<view class="wd55 he tac fs26 ">{{item.kecheng}}</view>
			</view>
		</scroll-list>
		 <my-datetime ref="dateTimePop" @ok="timeOk"></my-datetime>
	</view>
</template>

<script>
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	import wybTable from '@/components/wyb-table/wyb-table.vue';
	import myDatetime from '@/components/my-datetime/my-datetime'
	export default {
		components: {
			wybTable,
			mSearch,
			'my-datetime': myDatetime
		},
		data() {
			return {
				placeholder: '请输入搜索内容',
				list:[],
				page:0,
				time:'',
				timestr:'',
				hopeBeginTime: '',
				dateKey: ''
				
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '会员考勤'
			})
			var myDate = new Date();
			this.time = myDate.getFullYear() + "-" + (myDate.getMonth()+1);
			this.timestr = myDate.getFullYear() + "年" + (myDate.getMonth()+1)
		},
		methods: {
			// 加载数据
			load(paging) {
				var that = this
				that.page = that.page + 1
				setTimeout(() => {
					var json = {
						page: that.page,
						date:that.time
					}
					that.$http.post(that.$config.UrlPostuserKaoqin, json).then((res) => {
						if (res.status == 1) {
							var list = res.data.list
							if(list){
								var totalDemo = that.list.concat(list);
								that.list = JSON.parse(JSON.stringify(totalDemo))
								that.$refs.list.loadSuccess({ list: that.list, total: res.data.count });
							}
						}
					})
					
				}, that.$u.random(100, 1000));
			},
			refresh(){
				var that = this
				that.page = 1
				that.list = []
				setTimeout(() => {
					var json = {
						page: that.page,
						date:that.time
					}
					that.$http.post(that.$config.UrlPostuserKaoqin, json).then((res) => {
						if (res.status == 1) {
							var list = res.data.list
							if(list){
								var totalDemo = that.list.concat(list);
								that.list = JSON.parse(JSON.stringify(totalDemo))
								that.$refs.list.loadSuccess({ list: that.list, total: res.data.count });
							}
						}
					})
					
				}, that.$u.random(100, 1000));
			},
			// 开启弹窗
			dateOpen (key, date) {
				this.dateKey = key
				this.$refs.dateTimePop.open(date || '');
			},
			// 关闭弹窗
			timeOk (str, obj) {
				this.time = str
				this[this.dateKey] = str || ''
				var arr = str.split("-")
				this.timestr = arr[0] + "年" + arr[1]
				this.refresh()
			},
			details(item) {
				var data = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: "../kaoqin/kaoqin?data="+data + "&time=" + this.time
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.he {
		height: 70rpx;
		line-height: 70rpx;
		background-color: #BFDBF1;
		border: 1rpx solid #FFFFFF;
	}

	.he1 {
		height: 70rpx;
		line-height: 70rpx;
		background-color: #BFDBF1;
		border: 1rpx solid #FFFFFF;
	}




	.lan {
		background: #BFDBF1;
	}

	.teaching-lan {
		width: 188rpx;
		height: 318rpx;
		opacity: 1;
		background: #f1f6ff;
		border-radius: 8rpx;
		position: absolute;
		top: 40rpx;
		left: 160rpx;
		z-index: 99;
	}

	.teaching-lans {
		width: 188rpx;
		height: 318rpx;
		opacity: 1;
		background: #f1f6ff;
		border-radius: 8rpx;
		position: absolute;
		top: 75rpx;
		left: 160rpx;
		z-index: 99;
	}

	.Members-biaoge {
		width: 350rpx;
		height: 37.5rpx;
		line-height: 37.5rpx;
		border: 2rpx solid #f3f3f3;
		font-size: 16rpx;
	}

	.Members-biaoges {
		width: 350rpx;
		height: 37.5rpx;
		line-height: 37.5rpx;
		border: 2rpx solid #f3f3f3;
		font-size: 16rpx;
	}

	.Members-biaoge {
		width: 350rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: 2rpx solid #f3f3f3;
		font-size: 16rpx;
	}

	#lineTd {
		background: #fff url() no-repeat 100% center;
	}
</style>
